import React, { Component } from 'react';
import '../../styles/shop.scss'
import Header from '../../components/MyHeader/header'
import  Carousel  from '../../components/MyHeader/carousel';
import List from '../../components/MyHeader/classifyList';
import { NoticeBar,SearchBar } from 'antd-mobile'
import { home_banner, home_nav,home_goodlist} from '../../apis/api'
import pic from '../../assets/imgs/2.png'
import HomeList from '../../components/MyList/homelist'
import {withRouter} from 'react-router-dom'
class shop extends Component {

    // 挂载期 ( 挂载期的方法会自动执行, 而且只执行一次 )
    // constructor(props){
    //     super(props);
    //     this.state = {} //初始化组件状态
    // }
    state = {
        data: [],
        list: [],
        homelist:[],
    }
    toSearch=() =>{
        this.props.history.push({pathname:"/search"})
    }

    componentDidMount(){
        home_banner().then((ref) => {
            console.log(ref.data.list);
            this.setState({
                data:ref.data.list
            }, ()=>{
                // console.log(this.state.data);
            })
        })
        home_nav().then((ref) => {
            console.log(ref);
            this.setState({
                list:ref.data.list
            }, ()=>{
                // console.log(this.state.list);
            })
        })
        home_goodlist().then((ref) => {
            console.log(ref);
            this.setState({
                homelist:ref.data.list
            }, ()=>{
                console.log(this.state.homelist[0].name);
            })
        })

      }
    render() {
        const demoLongText = '1分抵1元。请你点击此处查看《购物须知》。'
        return ( 
            <div className='Shop'>
                <div className='headers'>
                    <Header back={null} left="logoLeft"  />
                    <div className='search'>
                        <SearchBar placeholder='搜索商品' onFocus={this.toSearch} />
                        <div className='service'>
                            <i className='iconfont icon-kefu'></i>
                            <span>客服</span>
                        </div>
                    </div>
                    
                </div>
                
                <div className='carouselChart'>
                <Carousel data={this.state.data}></Carousel>
                </div>
                <div className='classify'>
                    <NoticeBar content={demoLongText} color='alert' />
                    <List list={this.state.list}></List>
                </div>
                <div className='large'>
                    <img className='img' src={pic} alt="" />
                    <h3>猜你喜欢</h3>
                    <HomeList arr={this.state.homelist}></HomeList>
                </div>
                <div className='foot'></div>
            </div>
        );
    }

}

export default withRouter(shop);